<script setup>
import {useRoute} from "vue-router";
import {madeTypeOptions, stateOptions} from "@/mixins/index.js";
import {useUserStore} from "@/store/index.js";
import {apiParam, fieldVisible} from "@/utils/index.js";
import {induce} from "@/utils/derive.js";
import {changeDateFormat, getNowDate} from "@/utils/time.js";
import {skyNoticeSuccess, skyNoticeError, skyMsgError, skyMsgWarning, skyMsgBox, skyMsgInfo, skyMsgSuccess} from "@/utils/sky.js";
import {getNewInfo} from "@/components/SkyWindow/index.js";
import {productGenCodeApi} from "@/apis/PLM/frmProductGenCode/index.js";
import {More} from "@element-plus/icons-vue";

const route = useRoute();
const userStore = useUserStore();
const skyDialogRef = ref();
const skyWindowRef = ref();
const formRef = ref();
const pageData = ref({
  props: {children: "child", label: "ProTypeName"},
  treeData: [],
  showSearch: true,
  searchParams: {
    keyWord: "",
    sort: "asc",
    manage: true,
  },
  productGenCodeParams: {
    RuleCode: "",
    RuleName: "",
    ClassCode: "",
    ClassName: "",
  },
  pageParams: {
    pageIndex: 1,
    SortFields: "FRuleCode",
    direction: "asc",
    pageSize: 10,
  },
  ids: [],
  single: true,
  multiple: true,
  title: "编码生成器",
  confirmLoading: false,
  form: {
    RuleName: "",
    RuleCode: "",
    BillDate: getNowDate(),
    ClassName: "",
    ClassCode: "",
    ProCode: "",
    ProName: "",
    MadeType: "",
    ProSpec: "",
    isStock: 0,
    IsMangeBatch: 0,
    IsSerialNumber: 0,
    IsSpecelOffer: 0,
    UnitCode: "",
    MainWhName: "",
    MainWhCode: "",
    VarietyName: "",
    VarietyCode: "",
    Remark: "",
    Items: [],
    ItemsParam: [],
  },
  rules: {
    RuleName: [{required: true, message: "请选择规则编号", trigger: "blur"}],
    ProCode: [{required: true, message: "请生成物料编号", trigger: "blur"}],
    ProName: [{required: true, message: "请生成物料编号", trigger: "blur"}],
  },
  loading: false,
  itemsLoading: false,
  paramLoading: false,
  total: 0,
  column: [],
  showTable: [
    {title: "规则编号", IsVisible: 1},
    {title: "规则名称", IsVisible: 1},
    {title: "类别编号", IsVisible: 1},
    {title: "类别名称", IsVisible: 1},
    {title: "物料编号", IsVisible: 1},
    {title: "物料名称", IsVisible: 1},
    {title: "物料规格", IsVisible: 1},
    {title: "库存单位", IsVisible: 1},
    {title: "工艺名称", IsVisible: 1},
    {title: "工艺编号", IsVisible: 1},
    {title: "日期", IsVisible: 1},
    {title: "状态", IsVisible: 1},
    {title: "备注", IsVisible: 1},
  ],
  tableList: [],
  windowTitle: "",
  windowObj: {},
  windowParam: {},
  windowCond: {},
});
const method = reactive({
  /** 物料类别树 */
  handleListTree: async () => {
    const data = apiParam("2.0", "PLM.ProductTypesDAL.GetProTypeTrees", [0]);
    try {
      pageData.value.treeData = [];
      const res = await productGenCodeApi(data);
      pageData.value.treeData = res.data;
    } catch (error) {
      skyMsgError("数据查询失败，请刷新重试🌻");
    }
  },
  /** 关键字 */
  handleListKey: async () => {
    const data = apiParam("2.0", "PLM.ProductGenCodeDAL.Querybykeyvalue",
      [pageData.value.searchParams.keyWord,
        {
          pageNo: pageData.value.pageParams.pageIndex,
          ...pageData.value.pageParams
        }]);
    try {
      pageData.value.loading = true;
      pageData.value.tableList = [];
      const res = await productGenCodeApi(data);
      pageData.value.searchParams.keyWord = "";
      pageData.value.total = res.data.recordsTotal;
      pageData.value.tableList = res.data.data;
      pageData.value.loading = false;
    } catch (error) {
      skyMsgError("数据查询失败，请刷新重试🌻");
    }
  },
  /** 搜索 */
  handleSearch: () => {
    pageData.value.pageParams.pageIndex = 1;
    method.handleListKey();
  },
  /** 重置 */
  resetSearch: () => {
    method.resetSearchParams();
    method.handleListPage();
  },
  /** 重置搜索参数 */
  resetSearchParams: () => {
    pageData.value.searchParams = {
      keyWord: "",
      sort: "asc",
      manage: true,
    };
    pageData.value.productGenCodeParams = {
      RuleCode: "",
      RuleName: "",
      ClassCode: "",
      ClassName: "",
    };
    pageData.value.pageParams = {
      pageIndex: 1,
      SortFields: "FRuleCode",
      direction: "asc",
      pageSize: 10,
    };
  },
  /** 添加 */
  handleAdd: () => {
    // 打开弹出框
    skyDialogRef.value.skyOpen();
    // 重置表单
    method.resetForm();
    // 标题
    pageData.value.title = "添加";
    pageData.value.form.BillDate = getNowDate();
  },
  /** 选择物料分类 */
  handleChangeClass: (e) => {
    pageData.value.form.ClassCode = e.ProTypeCode;
    pageData.value.form.ClassName = e.ProTypeName;
  },
  /** 生成编码 */
  handleGenCode: async () => {
    pageData.value.form.ProCode = "";
    pageData.value.form.Items.forEach((item) => {
      pageData.value.form.ProCode += item.CodeParaValue + item.Linkstr;
    });
    pageData.value.form.ProName = "";
    pageData.value.form.Items.forEach((item) => {
      pageData.value.form.ProName += item.CodeNameValue;
    });
    pageData.value.form.ProCode = pageData.value.form.ProCode.replace("undefined", "");
    const data = apiParam("2.0", "PLM.ProductGenCodeDAL.GetMaxMaterialSeqNo",
      [pageData.value.form.ProCode, pageData.value.form.RuleCode]);
    try {
      const res = await productGenCodeApi(data);
      pageData.value.form.ProCode = res.data;
    } catch (error) {
      skyMsgError("生成编码失败，请刷新重试🌻");
    }
  },
  /** 输入值 */
  handleFocus: (val) => {
    // 当前的参数值等于输入值
    val.CodeParaValue = val.CodeNameValue;
    // 当参与编码时进行赋值
    for (let i = 0; i < pageData.value.form.Items.length; i++) {
      if (val.CodeParaName === pageData.value.form.Items[i].CodeParaName) {
        pageData.value.form.Items[i].CodeParaValue = val.CodeParaValue;
        pageData.value.form.Items[i].CodeNameValue = pageData.value.form.Items[i].CodeNameValue || val.CodeParaValue;
      }
    }
  },
  /** 处理数据 */
  handleDealItem: (index) => {
    const parma = pageData.value.form.ItemsParam[index];
    const item = pageData.value.form.Items.find(item => item.CodeParaName === parma.CodeParaName);
    if (item) {
      item.CodeNameValue = parma.CodeNameValue;
      item.CodeParaValue = parma.CodeParaValue;
    }
  },
  /** 删除行 */
  handleDeleteItems: (row) => {
    const id = row.RecordId;
    if (id === null || id === "") {
      skyMsgWarning("请选中需要删除的数据🌻");
      return;
    }
    skyMsgBox("您确认需要删除参数名称[" + row.CodeParaName + "]么？")
      .then(() => {
        try {
          const index = pageData.value.form.Items.find(item => item.RecordId === id);
          pageData.value.form.Items.splice(index, 1);
          skyNoticeSuccess("删除成功🌻");
        } catch (error) {
          skyNoticeError("删除失败，请刷新重试🌻");
        }
      })
      .catch(() => {
        skyMsgError("已取消🌻");
      });
  },
  /** 删除 */
  handleDelete: (row) => {
    const id = row.RecordId;
    if (id === null || id === "") {
      skyMsgWarning("请选中需要删除的数据🌻");
      return;
    }
    skyMsgBox("您确认需要删除参数名称[" + row.RuleName + "]么？")
      .then(async () => {
        try {
          const data = apiParam("2.0", "PLM.ProductGenCodeDAL.Delete", [id]);
          await productGenCodeApi(data);
          await method.handleListPage();
          skyNoticeSuccess("删除成功🌻");
        } catch (error) {
          await method.handleListPage();
          skyNoticeError("删除失败，请刷新重试🌻");
        }
      })
      .catch(() => {
        skyMsgError("已取消🌻");
      });
  },
  /** 批量删除 */
  handleBatchDelete: () => {
    return skyMsgInfo("暂不支持批量删除");
  },
  /** 修改 */
  handleUpdate: (row) => {
    // 打开弹出框
    skyDialogRef.value.skyOpen();
    // 重置表单
    method.resetForm();
    pageData.value.title = "修改";
    const id = row ? row.RecordId : pageData.value.ids[0];
    if (id == null || id === "") {
      skyMsgError("请选中需要修改的数据🌻");
    }
    // 回显数据
    method.handleEcho(id);
  },
  /** 回显数据 */
  handleEcho: async (id) => {
    if (id === null || id === "") {
      skyMsgWarning("请选择需要修改的数据🌻");
      return;
    }
    try {
      const data = apiParam("2.0", "PLM.ProductGenCodeDAL.GetById", [id]);
      const res = await productGenCodeApi(data);
      pageData.value.form = res.data;
    } catch (error) {
      skyNoticeError("数据获取失败，请刷新重试🌻");
    }
  },
  /** 确定  */
  handleConfirm: () => {
    if (!formRef.value) return;
    pageData.value.confirmLoading = true;
    (formRef.value).validate(async (valid) => {
      if (valid) {
        if (pageData.value.form.RecordId) {
          try {
            const data = apiParam("2.0", "PLM.ProductGenCodeDAL.Update",
              [pageData.value.form]);
            await productGenCodeApi(data);
            skyNoticeSuccess("修改成功🌻");
            pageData.value.confirmLoading = false;
            skyDialogRef.value.skyQuickClose();
            method.resetForm();
            await method.handleListTree();
            await method.handleListPage();
          } catch (error) {
            pageData.value.confirmLoading = false;
            skyNoticeError("修改失败，请刷新重试🌻");
          }
        } else {
          try {
            const data = apiParam("2.0", "PLM.ProductGenCodeDAL.Create",
              [pageData.value.form]);
            await productGenCodeApi(data);
            skyNoticeSuccess("添加成功🌻");
            pageData.value.confirmLoading = false;
            skyDialogRef.value.skyQuickClose();
            method.resetForm();
            await method.handleListTree();
            await method.handleListPage();
          } catch (error) {
            pageData.value.confirmLoading = false;
            skyNoticeError("添加失败，请刷新重试🌻");
          }
        }
      } else {
        skyMsgError("验证失败，请检查填写内容🌻");
        pageData.value.confirmLoading = false;
      }
    });
  },
  /** 取消 */
  handleCancel: () => {
    skyDialogRef.value.skyClose();
  },
  /** 清空表单数据 */
  resetForm: () => {
    nextTick(() => {
      if (formRef.value) {
        // 重置该表单项，将其值重置为初始值，并移除校验结果
        formRef.value.resetFields();
      }
    });
    pageData.value.form = {
      RuleName: "",
      RuleCode: "",
      BillDate: getNowDate(),
      ClassName: "",
      ClassCode: "",
      ProCode: "",
      ProName: "",
      MadeType: "",
      ProSpec: "",
      isStock: 0,
      IsMangeBatch: 0,
      IsSerialNumber: 0,
      IsSpecelOffer: 0,
      UnitCode: "",
      MainWhName: "",
      MainWhCode: "",
      VarietyName: "",
      VarietyCode: "",
      Remark: "",
      Items: [],
      ItemsParam: [],
    };
  },
  /** 导出 */
  handleDerive: () => {
    const column = [
      {title: "字典类别编号", dataIndex: "DicTypeCode"},
      {title: "字典类别名称", dataIndex: "DicTypeName"},
      {title: "排序", dataIndex: "Sort"},
      {title: "日期", dataIndex: "BillDate"},
      {title: "状态", dataIndex: "State"},
      {title: "备注", dataIndex: "Remark"},
      {title: "录入人", dataIndex: "Creator"},
      {title: "录入时间", dataIndex: "CreateTime"},
      {title: "修改人", dataIndex: "LastModifier"},
      {title: "修改时间", dataIndex: "LastModifyTime"},
    ];
    induce("编码生成器报表", column, pageData.value.tableList);
    skyMsgSuccess("导出成功");
    method.handleListPage();
  },
  /** 是否多选 */
  handleSelectionChange: (selection) => {
    pageData.value.ids = selection.map((item) => item.RecordId);
    pageData.value.single = selection.length !== 1; // 单选
    pageData.value.multiple = !selection.length; // 多选
  },
  /** 表格表头 */
  handleListMeter: async () => {
    const data = apiParam("2.0", "SYS.UserColumnDefineDAL.Query",
      [{UserCode: userStore.userid, Context: route.path}]);
    try {
      const res = await productGenCodeApi(data);
      pageData.value.column = res.data.Columns.map(item => {
        return {
          title: item.DisplayCaption,
          dataIndex: item.DisplayFieldName,
          IsVisible: item.IsVisible,
        }
      });
    } catch (error) {
      skyMsgError("数据查询失败，请刷新重试🌻");
    }
  },
  /** 数据表格 */
  handleListPage: async () => {
    const data = apiParam("2.0", "PLM.ProductGenCodeDAL.Querybypage",
      [pageData.value.productGenCodeParams, pageData.value.pageParams]);
    try {
      pageData.value.loading = true;
      pageData.value.tableList = [];
      const res = await productGenCodeApi(data);
      pageData.value.total = res.data.recordsTotal;
      pageData.value.tableList = res.data.data;
      pageData.value.loading = false;
    } catch (error) {
      skyMsgError("数据查询失败，请刷新重试🌻");
    }
  },
  /** 打开来源参数 */
  handleOpenWindow: (title, data) => {
    // 打开弹出框
    skyWindowRef.value.skyOpen();
    // 判断参数
    if (title === "编码规则") {
      pageData.value.windowParam.Code = "CodeRules";
      pageData.value.windowParam.Seq = "0001";
    } else if (title === "字典") {
      pageData.value.windowParam.Code = "Dictionary";
      pageData.value.windowParam.Seq = "0001";
      pageData.value.windowObj = data;
    } else if (title === "库存单位") {
      pageData.value.windowParam.Code = "Dictionary";
      pageData.value.windowParam.Seq = "0001";
    } else if (title === "工艺路线") {
      pageData.value.windowParam.Code = "Variety";
      pageData.value.windowParam.Seq = "0001";
    } else if (title === "主要仓库") {
      pageData.value.windowParam.Code = "WareHouse";
      pageData.value.windowParam.Seq = "0001";
    }
    // 标题
    pageData.value.windowTitle = title;
    pageData.value.windowObj = data;
    // 获取来源条件
    getNewInfo(pageData.value.windowParam).then(res => {
      pageData.value.windowCond = res;
      method.dealWindowData(title, res);
    });
  },
  /** 处理条件 */
  dealWindowData: (title, value) => {
    if (title === "编码规则") {

    } else if (title === "库存单位") {
      value.Conditions[1].ConValue = "计量单位";
    } else if (title === "主要仓库") {
      value.Conditions[0].ConValue = 0;
      value.Conditions[1].ConValue = 1;
    } else if (title === "字典") {
      value.Conditions[1].ConValue = value.ParaName;
    }
  },
  /** 选择指定来源参数 */
  handleWindowConfirm: (val) => {
    if (pageData.value.windowTitle === "编码规则") {
      pageData.value.form.RuleName = val.RuleName;
      pageData.value.form.RuleCode = val.RuleCode;
      method.handleRulesList(val);
    } else if (pageData.value.windowTitle === "库存单位") {
      pageData.value.form.UnitCode = val.DicName;
    } else if (pageData.value.windowTitle === "工艺路线") {
      pageData.value.form.VarietyCode = val.VarietyCode;
      pageData.value.form.VarietyName = val.VarietyName;
    } else if (pageData.value.windowTitle === "主要仓库") {
      pageData.value.form.MainWhName = val?.WhName;
      pageData.value.form.MainWhCode = val?.WhCode;
    } else if (pageData.value.windowTitle === "参数开窗") {
      let index = 0;
      pageData.value.form.ItemsParam.forEach((item, i) => {
        if (item.CodeParaName === pageData.value.windowObj.CodeParaName) {
          index = i;
          item.CodeNameValue = val.DicName;
          item.CodeParaValue = val.DicCode;
        }
      });
      method.handleDealItem(index);
    }
    pageData.value.windowTitle = "";
    pageData.value.windowObj = {};
    pageData.value.windowParam = {};
    pageData.value.windowCond = {};
    skyWindowRef.value.skyQuickClose();
  },
  /** 取消来源参数 */
  handleWindowCancel: () => {
    skyWindowRef.value.skyClose();
  },
  /** 获取指定编码规则 */
  handleRulesList: async (val) => {
    const data = apiParam("2.0", "PLM.CodeRulesDAL.Querybypage",
      [
        {RuleCode: val.RuleCode, RuleName: val.RuleName},
        {
          pageNo: 1,
          sortBy: "FRuleCode",
          direction: "asc",
          pageSize: 100000,
        },
      ]);
    try {
      pageData.value.itemsLoading = true;
      pageData.value.paramLoading = true;
      pageData.value.form.Items = [];
      pageData.value.form.ItemsParam = [];
      const res = await productGenCodeApi(data);
      const dataId = apiParam("2.0", "PLM.CodeRulesDAL.GetById", [res.data.data[0].RecordId]);
      const response = await productGenCodeApi(dataId);
      // 子表
      pageData.value.form.Items = response.data.Items;
      pageData.value.form.Items.sort((a, b) => a.Sort - b.Sort);
      pageData.value.form.Items.forEach(item => {
        if (!item.isParams) {
          item.isParams = false;
        }
      });
      // 字典参数
      pageData.value.form.ItemsParam = response.data.ItembyParam.filter(item => item.SourceType !== 0);
      pageData.value.form.ItemsParam.forEach(param => {
        const item = pageData.value.form.Items.find(item => {
          return item.CodeParaName === param.CodeParaName;
        });
        if (item) {
          item.isParams = true;
        }
      });
      pageData.value.itemsLoading = false;
      pageData.value.paramLoading = false;
    } catch (error) {
      skyMsgError("数据查询失败，请刷新重试🌻");
    }
  },
  /** 打开编码参数 */
  handleOpenDictSource: (title, data) => {
    // 打开弹出框
    skyWindowRef.value.skyOpen();
    // 参数
    pageData.value.windowParam.Code = "Dictionary";
    pageData.value.windowParam.Seq = "0001";
    pageData.value.windowObj = data;
    // 标题
    pageData.value.windowTitle = title;
    pageData.value.windowObj = data;
    // 获取来源条件
    getNewInfo(pageData.value.windowParam).then(res => {
      pageData.value.windowCond = res;
      method.handleDealDictValue(title, res);
    });
  },
  /** 处理编码参数条件 */
  handleDealDictValue: (title, value) => {
    value.Conditions[1].ConValue = title;
    pageData.value.windowTitle = "参数开窗";
  },
});
onMounted(() => {
  method.handleListTree();
  method.handleListMeter();
  method.handleListPage();
});
</script>

<!-- 编码生成器 -->
<template>
  <div class="sky-flex">
    <SkyCard>
      <!-- 搜索条件 -->
      <el-form v-show="pageData.showSearch" :inline="true">
        <el-form-item label="关键字" prop="keyWord">
          <el-input
            style="width: 240px"
            placeholder="请输入关键字"
            v-model="pageData.searchParams.keyWord"
            clearable
            @keyup.enter.native="method.handleListKey"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-select v-model="pageData.searchParams.sort" style="width: 240px" clearable
                     @keyup.enter.native="method.handleListPage">
            <el-option label="升序" value="asc"/>
            <el-option label="降序" value="desc"/>
          </el-select>
        </el-form-item>
        <el-form-item label="是否显示管理字段" prop="manage">
          <el-checkbox v-model="pageData.searchParams.manage"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" plain v-throttle="method.handleSearch">搜索</el-button>
          <el-button type="danger" icon="refresh" plain v-debounce="method.resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格头部按钮 -->
      <el-row :gutter="10">
        <el-col :span="1.5">
          <el-button type="primary" icon="plus" plain @click="method.handleAdd()">新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="danger" icon="delete" plain @click="method.handleBatchDelete()" :disabled="pageData.multiple">
            删除
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="success" icon="edit" plain @click="method.handleUpdate()" :disabled="pageData.single">修改
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="warning" icon="download" plain @click="method.handleDerive">导出</el-button>
        </el-col>
        <SkyToolbar v-model:showSearch="pageData.showSearch" v-model:showColumns="pageData.showTable"
                    @refreshTable="method.handleListPage"></SkyToolbar>
      </el-row>
      <br/>
      <!-- 数据表格 -->
      <el-table
        v-loading="pageData.loading"
        border
        :data="pageData.tableList"
        empty-text="暂时没有数据哟🌻"
        @selection-change="method.handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column v-if="fieldVisible('规则编号', pageData.showTable)" label="规则编号" prop="RuleCode"
                         width="150" align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column v-if="fieldVisible('规则名称', pageData.showTable)" label="规则名称" prop="RuleName"
                         width="150" align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column v-if="fieldVisible('类别编号', pageData.showTable)" label="类别编号" prop="ClassCode"
                         width="150" align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column v-if="fieldVisible('类别名称', pageData.showTable)" label="类别名称" prop="ClassName"
                         width="150" align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column v-if="fieldVisible('物料编号', pageData.showTable)" label="物料编号" prop="ProCode"
                         width="170" align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column v-if="fieldVisible('物料规格', pageData.showTable)" label="物料规格" prop="WhType"
                         width="150" align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column v-if="fieldVisible('库存单位', pageData.showTable)" label="库存单位" prop="UnitCode"
                         width="100" align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column v-if="fieldVisible('工艺名称', pageData.showTable)" label="工艺名称" prop="VarietyName"
                         width="200" align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column v-if="fieldVisible('工艺编号', pageData.showTable)" label="工艺编号" prop="VarietyCode"
                         width="150" align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column v-if="fieldVisible('日期', pageData.showTable)" label="日期" prop="BillDate" width="150" align="center"
                         :show-overflow-tooltip="true">
          <template #default="scope">
            {{ changeDateFormat(scope.row.BillDate, "YYYY-MM-DD") }}
          </template>
        </el-table-column>
        <el-table-column v-if="fieldVisible('状态', pageData.showTable)" label="状态" prop="State" width="120" align="center"
                         :show-overflow-tooltip="true">
          <template #default="scope">
            <SkyTag :tagOptions="stateOptions" :value="scope.row.State"></SkyTag>
          </template>
        </el-table-column>
        <el-table-column v-if="fieldVisible('备注', pageData.showTable)" label="备注" prop="Remark" width="180" align="center"
                         :show-overflow-tooltip="true"></el-table-column>
        <el-table-column v-if="pageData.searchParams.manage" label="录入人" prop="Creator" width="130"
                         align="center"></el-table-column>
        <el-table-column v-if="pageData.searchParams.manage" label="录入时间" prop="CreateTime" width="200" align="center"
                         :show-overflow-tooltip="true">
          <template #default="scope">
            {{ changeDateFormat(scope.row.CreateTime, "YYYY-MM-DD hh:mm:ss") }}
          </template>
        </el-table-column>
        <el-table-column v-if="pageData.searchParams.manage" label="修改人" prop="LastModifier" width="130"
                         align="center"></el-table-column>
        <el-table-column v-if="pageData.searchParams.manage" label="修改时间" prop="LastModifyTime" width="200" align="center"
                         :show-overflow-tooltip="true">
          <template #default="scope">
            {{ changeDateFormat(scope.row.LastModifyTime, "YYYY-MM-DD hh:mm:ss") }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120" fixed="right">
          <template #default="{ row }">
            <el-tooltip content="修改🌻" placement="top">
              <el-button
                type="primary"
                icon="Edit"
                circle
                plain
                @click="method.handleUpdate(row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip content="删除🌻" placement="top">
              <el-button
                type="danger"
                icon="Delete"
                circle
                plain
                @click="method.handleDelete(row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <br/>
      <!-- 分页 -->
      <el-pagination
        v-model:current-page="pageData.pageParams.pageIndex"
        v-model:page-size="pageData.pageParams.pageSize"
        v-show="pageData.total > 0"
        background
        :page-sizes="[10, 20, 50, 100, 200]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
        @size-change="method.handleListPage"
        @current-change="method.handleListPage"
      />
      <!-- 添加 OR 修改 -->
      <SkyDialog
        ref="skyDialogRef"
        :title="pageData.title"
        @skyConfirm="method.handleConfirm"
        @skyCancel="method.handleCancel"
        :loading="pageData.confirmLoading"
        :fullscreen="true"
        :footer-hidden="false"
        :height="700"
      >
        <template #content>
          <div style="height: 350px; display: flex">
            <div style="width: 65%">
              <SkyCard>
                <el-form ref="formRef" :rules="pageData.rules" :model="pageData.form" label-width="80px" status-icon>
                  <el-row>
                    <el-col :xs="{ span: 24 }" :sm="{ span: 8 }">
                      <el-form-item label="编码规则" prop="RuleName">
                        <el-input v-model="pageData.form.RuleName" placeholder="请选择编码规则" clearable>
                          <template #append>
                            <el-button :icon="More" @click="method.handleOpenWindow('编码规则', null)"/>
                          </template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :xs="{ span: 24 }" :sm="{ span: 8 }">
                      <el-form-item prop="RuleCode" class="p-l-10px">
                        <el-input v-model="pageData.form.RuleCode" placeholder="选择编码规则自动录入" disabled clearable/>
                      </el-form-item>
                    </el-col>
                    <el-col :xs="{ span: 24 }" :sm="{ span: 8 }">
                      <el-form-item label="日期" prop="BillDate" class="p-l-10px">
                        <el-date-picker style="width: 100%;" v-model="pageData.form.BillDate" type="date"
                                        placeholder="请选择日期"
                                        clearable/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :xs="{ span: 24 }" :sm="{ span: 8 }">
                      <el-form-item label="物料类别" prop="ClassName">
                        <el-tree-select
                          v-model="pageData.form.ClassName"
                          node-key="ProTypeCode"
                          :data="pageData.treeData"
                          :props="pageData.props"
                          @currentChange="method.handleChangeClass"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :xs="{ span: 24 }" :sm="{ span: 8 }">
                      <el-form-item label="物料属性" prop="MadeType" class="p-l-10px">
                        <el-select v-model="pageData.form.MadeType" clearable>
                          <el-option
                            v-for="item in madeTypeOptions"
                            :key="item.label"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :xs="{ span: 24 }" :sm="{ span: 8 }">
                      <el-form-item label="物料规格" prop="ProSpec" class="p-l-10px">
                        <el-input v-model="pageData.form.ProSpec" placeholder="请输入物料规格" clearable/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :xs="{ span: 24 }" :sm="{ span: 8 }">
                      <el-form-item label="库存单位" prop="UnitCode">
                        <el-input v-model="pageData.form.UnitCode" placeholder="请选择单位" clearable>
                          <template #append>
                            <el-button :icon="More" @click="method.handleOpenWindow('库存单位', null)"/>
                          </template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :xs="{ span: 24 }" :sm="{ span: 8 }">
                      <el-form-item label="主要仓库" prop="MainWhName" class="p-l-10px">
                        <el-input v-model="pageData.form.MainWhName" placeholder="请选择主要仓库" clearable>
                          <template #append>
                            <el-button :icon="More" @click="method.handleOpenWindow('主要仓库', null)"/>
                          </template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :xs="{ span: 24 }" :sm="{ span: 8 }">
                      <el-form-item label="工艺路线" prop="VarietyName" class="p-l-10px">
                        <el-input v-model="pageData.form.VarietyName" placeholder="请选择工艺路线" clearable>
                          <template #append>
                            <el-button :icon="More" @click="method.handleOpenWindow('工艺路线', null)"/>
                          </template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :xs="{ span: 24 }" :sm="{ span: 8 }">
                      <el-form-item label="物料编号" prop="ProCode">
                        <el-input v-model="pageData.form.ProCode" placeholder="请输入物料编号" clearable/>
                      </el-form-item>
                    </el-col>
                    <el-col :xs="{ span: 24 }" :sm="{ span: 8 }">
                      <el-form-item label="物料名称" prop="ProName" class="p-l-10px">
                        <el-input v-model="pageData.form.ProName" placeholder="请输入物料名称" clearable/>
                      </el-form-item>
                    </el-col>
                    <el-col :xs="{ span: 24 }" :sm="{ span: 8 }">
                      <el-form-item>
                        <el-button type="primary" icon="plus" plain v-debounce="method.handleGenCode">生成编码</el-button>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :xs="{ span: 24 }" :sm="{ span: 4 }">
                      <el-form-item label="存货管理" prop="isStock" class="p-l-10px">
                        <el-checkbox v-model="pageData.form.isStock" :true-value="1" :false-value="0"/>
                      </el-form-item>
                    </el-col>
                    <el-col :xs="{ span: 24 }" :sm="{ span: 4 }">
                      <el-form-item label="批号管理" prop="IsMangeBatch">
                        <el-checkbox v-model="pageData.form.IsMangeBatch" :true-value="1" :false-value="0"/>
                      </el-form-item>
                    </el-col>
                    <el-col :xs="{ span: 24 }" :sm="{ span: 4 }">
                      <el-form-item label="序号管理" prop="IsSerialNumber" class="p-l-10px">
                        <el-checkbox v-model="pageData.form.IsSerialNumber" :true-value="1" :false-value="0"/>
                      </el-form-item>
                    </el-col>
                    <el-col :xs="{ span: 24 }" :sm="{ span: 4 }">
                      <el-form-item label="预约管理" prop="IsSpecelOffer" class="p-l-10px">
                        <el-checkbox v-model="pageData.form.IsSpecelOffer" :true-value="1" :false-value="0"/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :xs="{ span: 24 }" :sm="{ span: 24 }">
                      <el-form-item label="备注" prop="Remark">
                        <el-input v-model="pageData.form.Remark" :rows="2" type="textarea" placeholder="请输入备注"/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </SkyCard>
            </div>
            <div style="width: 35%" class="sky-flex">
              <SkyCard>
                <el-table
                  v-loading="pageData.paramLoading"
                  border
                  :data="pageData.form.ItemsParam"
                  empty-text="暂时没有数据哟🌻"
                >
                  <el-table-column label="参数" prop="CodeParaName" align="center"
                                   :show-overflow-tooltip="true"></el-table-column>
                  <el-table-column label="值" prop="CodeNameValue" align="center"
                                   :show-overflow-tooltip="true">
                    <template #default="scope">
                      <el-input v-if="scope.row.ParaSourceType === '字典'"
                                v-model="scope.row.CodeNameValue" placeholder="请选择值" clearable>
                        <template #append>
                          <el-button :icon="More" @click="method.handleOpenDictSource(scope.row.CodeParaName, scope.row)"/>
                        </template>
                      </el-input>
                      <el-input v-else v-model="scope.row.CodeNameValue" @input="method.handleFocus(scope.row)"
                                placeholder="请输入值" clearable/>
                    </template>
                  </el-table-column>
                  <el-table-column label="是否必填" prop="IsMustFull" align="center"
                                   :show-overflow-tooltip="true">
                    <template #default="scope">
                      <el-select v-model="scope.row.IsMustFull" clearable>
                        <el-option label="否" :value="0"/>
                        <el-option label="是" :value="1"/>
                      </el-select>
                    </template>
                  </el-table-column>
                </el-table>
              </SkyCard>
            </div>
          </div>
          <div class="sky-flex">
            <SkyCard>
              <el-table
                v-loading="pageData.itemsLoading"
                border
                :data="pageData.form.Items"
                empty-text="暂时没有数据哟🌻"
              >
                <el-table-column label="序号" prop="Sort" width="150" align="center">
                  <template #default="scope">
                    <el-input-number style="width: 100%;" v-model="scope.row.Sort"/>
                  </template>
                </el-table-column>
                <el-table-column label="名称" prop="CodeParaName" align="center">
                  <template #default="scope">
                    <el-input v-model="scope.row.CodeParaName" placeholder="请输入名称" clearable/>
                  </template>
                </el-table-column>
                <el-table-column label="编码值" prop="CodeParaValue" align="center">
                  <template #default="scope">
                    <el-input v-model="scope.row.CodeParaValue" placeholder="请输入编码值" clearable/>
                  </template>
                </el-table-column>
                <el-table-column label="名称值" prop="CodeNameValue" align="center">
                  <template #default="scope">
                    <el-input v-model="scope.row.CodeNameValue" placeholder="请输入名称值" clearable/>
                  </template>
                </el-table-column>
                <el-table-column label="备注" prop="Remark" align="center">
                  <template #default="scope">
                    <el-input v-model="scope.row.Remark" placeholder="请输入备注" clearable/>
                  </template>
                </el-table-column>
                <el-table-column label="操作" prop="Operate" align="center">
                  <template #default="scope">
                    <el-tooltip content="删除🌻" placement="top">
                      <el-button
                        type="danger"
                        icon="Delete"
                        circle
                        plain
                        @click="method.handleDeleteItems(scope.row)"
                      ></el-button>
                    </el-tooltip>
                  </template>
                </el-table-column>
              </el-table>
            </SkyCard>
          </div>
        </template>
      </SkyDialog>
      <!-- 来源参数 -->
      <SkyWindow
        ref="skyWindowRef"
        :title="pageData.windowTitle"
        :condition="pageData.windowCond"
        @skyConfirm="method.handleWindowConfirm"
        @skyCancel="method.handleWindowCancel"
      >
      </SkyWindow>
    </SkyCard>
  </div>
</template>

<style scoped lang="scss">

</style>
